import Header from './Header/index'
import List from './List/index'
import Footer from './Footer/index'
import { Component } from 'react';
class App extends Component{
  state = {todos:[
    {id:1,title:'吃饭',done:false},
    {id:2,title:'睡觉',done:true},
    {id:3,title:'打游戏',done:false}
  ]}
  addTodo = (data) => {
    const {todos} = this.state
    const newData = [data,...todos]
    this.setState({todos:newData})
  }
  // 删除
  deleteTodo = id => {
    console.log(id,'asdfasdf ');
    const {todos} = this.state
    const newTodos = todos.filter(item => item.id !== id)
    this.setState({todos:newTodos})
  }
  // 修改
  changeCheck = (id,status) => {
    const {todos} = this.state
    const newTodos = todos.map(item => {
      if(item.id === id){
        item.done = status
      }
      return item
    })
    this.setState({todos:newTodos})
  }
  // 全选/取消全选
  allCheck = (status) => {
    const {todos} = this.state
    const newTodos = todos.map(item => {
      item.done = status
      return item
    })
    this.setState({todos:newTodos})
  }
  render(){
    const {todos} = this.state
    console.log(todos.length,'totdoso');
    return(
      <div style={{width:'500px',height:'500px',padding:'20px'}}>
      <Header addTodo={this.addTodo} />
      <List todos={todos} deleteTodo={this.deleteTodo} changeCheck={this.changeCheck} />
      <Footer todos={todos} allCheck={this.allCheck} />
    </div>
    )
  }
}

export default App;
